'use strict'
import React, { Component } from 'react'
class Circle extends Component {
  state = { current: 0 }
  size = 100
  sw = 10
  r = 45
  pbc = 'rgba(247,106,83,1)'
  bbc = 'rgba(251,240,203,1)'
  pbf = 'transparent'
  bbf = 'transparent'
  time = 1
  allLength = Math.PI * 2 * this.r
  startPoint = -90
  gradientDirection = 'vertical'
  showText = true
  textStyle = { size: 12, color: '#555', type: 0 }
  linecap = 'square'
  flag = null
  count = 0
  _stopLoop = this._stopLoop.bind(this)
  _startLoop = this._startLoop.bind(this)
  constructor (props) {
    super(props)
    // 挂在全局上方便调用
    window.doll = {
      startLoop: this._startLoop,
      stopLoop: this._stopLoop
    }
  }
  // 开始 增长
  _startLoop (time) {
    this.count = 30 - time
    this.setState({ current: this.count / 30 })
    this.flag = setInterval(() => {
      this.count += 1
      if (this.count > 30) { this._stopLoop() }
      else { this.setState({ current: this.count / 30 }) }
    }, 1000)
  }
  // 停止 增长
  _stopLoop () {
    if (this.flag) {
      clearInterval(this.flag)
      this.flag = null
      this.count = 0
    }
  }
  componentWillUnmount () { this._stopLoop() }
  render () {
    let { current } = this.state
    current = current >= 1 ? 1 : current
    return (
      <svg viewBox={'0 0 ' + this.size + ' ' + this.size} width='100%' height='100%' version="1.1">
        {/* <circle r={this.r} cx={this.size / 2} cy={this.size / 2} style={{ stroke: this.bbc, fill: this.bbf, strokeWidth: this.sw }}></circle> */}
        <circle r={this.r} cx={this.size / 2} cy={this.size / 2}
          transform={'rotate(' + this.startPoint + ',' + this.size / 2 + ', ' + this.size / 2 + ')'}
          style={{
            transition: 'all ' + this.time + 's linear',
            WebkitTransition: 'all ' + this.time + 's linear',
            strokeDashoffset: this.allLength * (1 - current),
            strokeDasharray: this.allLength,
            strokeLinecap: this.linecap,
            stroke: this.pbc,
            fill: this.pbf,
            strokeWidth: this.sw
          }}
        >
        </circle>
      </svg>
    )
  }
}
export default Circle
